<template>
  <div class="vc-table-header">
    <slot>
      <span class="count" v-if="count!=undefined">
        查询到 <span class="count-number">{{count}}</span> 条记录
      </span>
    </slot>
    <slot name="content"></slot>
    <span class="export" v-if="exports">
      <el-button type="text" size="small" @click="exportExcel">导出Excel</el-button>
    </span>
  </div>
</template>
<script>
/**
 * table 顶部信息
 *  props
 *     count：查询结果总记录数
 *     exports: 导出Eacel的回调，回调参数为导出Excel的方法
 *  slot
 *     default: 替换总记录数的显示区域
 *     content: 附加其它信息
*/
export default {
  name: 'TableHeader',
  props: {
    count: {
      type: Number
    },
    exports: {
      type: Function
    }
  },
  methods: {
    exportExcel() {
      this.exports && this.exports(this.exportData);
    },
    exportData(url, param) {
      if (url.indexOf("//") == -1) {
        url = this.$config.apiServer + url;
      }
      url = url + '?';
      param.token = param.token || this.$root.token
      for (let key in param) {
        let oValue = param[key];
        if (oValue !== "" && oValue !== null && oValue !== undefined) {
          if (typeof oValue != "string") {
            oValue = JSON.stringify(oValue);
          }
          url = url + key + "=" + oValue + "&";
        }
      }
      // window.open(url)
      let saveLink = document.createElement("a");
      saveLink.href = url;
      //saveLink.target = "_blank";
      // saveLink.download = fileName
      saveLink.click();
    }
  }
};
</script>

<style lang="scss">
  .vc-table-header {
    min-height: 34px;
    line-height: 34px;
    border: 1px solid #EBEEF5;
    border-bottom: 0px solid;
    font-size: 14px;
    color: #303133;
    padding: 0 10px;
    font-size: 14px;
    .count .count-number {
      color: $color-primary;
    }
    .el-button--text {
      float: right;
      font-size: 14px;
      height: 32px;
    }
  }
</style>